<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'main.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script src="../js/public/jquery-1.11.0.min.js" type="text/javascript"></script>
  </head>
  
  <body>
  <!--标题外框-->
<div class="heder relave">
    <div class="logo_heder"><img src=""></div>


    <div class="heder_left">
        <ul class="nva_R asote nav_right">
            <div class="room_btn"><a href="">免费发布房源</a></div>
            <li class="room_li"><a>登录/注册</a></li>
            <div class="room_div"><a>APP立减</a></div>
            <li class="room_li"><a>商旅合作</a></li>
        </ul>

    </div>

</div>
<!--标题外框-->

<!-- 轮播图 -->

<div id="box">
    <div class="pic"><img src="sno/BB7MHU7NN5RM5XUBVFVXXU3QQLQYEB.jpg" /></div>
    <!--<div class="pic"><img src="sno/goodlodgeunit.jpg" /></div>
-->
</div>

<!-- 轮播图 -->


<!--特别服务-->
<div class="ads_room">
    <ul>
        <li class="">
            <p>满足一家人住宿</p>
            <span>不论一家老小还是朋友几人</span>
        </li>

        <li class="">
            <p>家一般的舒适</p>
            <span>有客厅、有厨房、能洗衣、能做饭</span>
        </li>

        <li class="">
            <p>比酒店便宜50%</p>
            <span>一套凡舍名宿=2间酒店房间</span>
        </li>

        <li class="">
            <p>体验当地人生活</p>
            <span>本地房东帮你规划行程、做向导</span>
        </li>
    </ul>

</div>



<!--特别服务-->
<div class="index-box-tit t-center">
    <h2 class="mb5">
        <font>热门景点</font>
    </h2>
    <span class="f18">告别匆忙，给我们一个理由去旅行</span>

</div>

<!-- 轮播图 -->
<div class="container_outer">
    <div class="container">
        <ul class="list" id="list">
            <!--为了循环-->
            <a onclick=""><li><div class="scenic"><img alt="2"  src=""></div><p>测试山</p><span>测试山（Mount Qingcheng） ，世界文化遗产、全国重点文物保护单位、、全球道教天师道圣地</span></li></a>

            <a onclick=""><li><div class="scenic"><img alt="2"  src=""></div><p>测试山</p><span>测试山（Mount Qingcheng） ，世界文化遗产、全国重点文物保护单位、、全球道教天师道圣地</span></li></a>

            <a onclick=""><li><div class="scenic"><img alt="2"  src=""></div><p>测试山</p><span>测试山（Mount Qingcheng） ，世界文化遗产、全国重点文物保护单位、、全球道教天师道圣地</span></li></a>
            <!--为了循环-->

            <!--真正显示出来的-->
            <a onclick=""><li><div class="scenic"><img alt="1" src=""></div><p>青城山</p><span>青城山（Mount Qingcheng） ，世界文化遗产、全国重点文物保护单位、、全球道教天师道圣地</span></li></a>

            <a onclick=""><li><div class="scenic"><img alt="1"  src=""></div><p>青城山</p><span>青城山（Mount Qingcheng） ，世界文化遗产、全国重点文物保护单位、、全球道教天师道圣地</span></li></a>

            <a onclick=""><li><div class="scenic"><img alt="1"  src=""></div><p>青城山</p><span>青城山（Mount Qingcheng） ，世界文化遗产、全国重点文物保护单位、、全球道教天师道圣地</span></li></a>

            <a onclick=""><li><div class="scenic"><img alt="2"  src=""></div><p>测试山</p><span>测试山（Mount Qingcheng） ，世界文化遗产、全国重点文物保护单位、、全球道教天师道圣地</span></li></a>

            <a onclick=""><li><div class="scenic"><img alt="2"  src=""></div><p>测试山</p><span>测试山（Mount Qingcheng） ，世界文化遗产、全国重点文物保护单位、、全球道教天师道圣地</span></li></a>

            <a onclick=""><li><div class="scenic"><img alt="2"  src=""></div><p>测试山</p><span>测试山（Mount Qingcheng） ，世界文化遗产、全国重点文物保护单位、、全球道教天师道圣地</span></li></a>
            <!--真正显示出来的-->

            <!--为了循环-->
            <a onclick=""><li><div class="scenic"><img alt="1" src=""></div><p>青城山</p><span>青城山（Mount Qingcheng） ，世界文化遗产、全国重点文物保护单位、、全球道教天师道圣地</span></li></a>

            <a onclick=""><li><div class="scenic"><img alt="1"  src=""></div><p>青城山</p><span>青城山（Mount Qingcheng） ，世界文化遗产、全国重点文物保护单位、、全球道教天师道圣地</span></li></a>

            <a onclick=""><li><div class="scenic"><img alt="1"  src=""></div><p>青城山</p><span>青城山（Mount Qingcheng） ，世界文化遗产、全国重点文物保护单位、、全球道教天师道圣地</span></li></a>
            <!--为了循环-->

        </ul>
    </div>
    <div id="prev" class="paging"><</div>


    <div id="next" class="paging">></div>

</div>

<!-- 轮播图 -->


<!--短租公寓推荐-->
<div class="index_box">
    <div class="index-box-tit t-center">
        <h2>
            <font>短租公寓推荐</font>
        </h2>

    </div>

    <ul class="apart">
        <li class="mb20 mr20"></li>
        <li class="mb20 mr20"></li>
        <li class="mb20 mr20"></li>
        <li class="mb20 mr20"></li>

    </ul>

    <div class="tabs clearfloat">
        <div class="tab_item_outer">
            <div class="tab_item"></div>
            <div class="tab_item on"></div>
        </div>
    </div>
</div>

<!--短租公寓推荐-->


<!--房东故事-->
<div class="index_box story">
    <div class="index-box-tit t-center">
        <h2>
            <font>房东故事</font>
        </h2>

    </div>


    <div class="tabslider_outer">
        <div class="tabslider clearfloat">
            <div class="tabslider_div"><img src=""></div>
            <div class="belt"></div>
            <div class="tabslider_div"><img src=""></div>

        </div>
    </div>
</div>
<!--房东故事-->

<script>

   /* //循环显示图片
    $(window).ready(function(){
        $("#box .pic").eq(0).show();
        var i=0;
        function fad(){
            var m = i%4;
            var n = (i+1)%4;
            $("#box .pic").eq(m).fadeOut(1000);
            $("#box .pic").eq(n).fadeIn(1000);
            i++;
        };
        int = setInterval(fad,3000);
    });*/
</script>

<script>
    $(function () {
        var $container = $('#container');
        var $list = $('#list');
        var $points = $('#pointsDiv>span')
        var $prev = $('#prev')
        var $next = $('#next')
        var PAGE_WIDTH = 1110;//翻页宽度
        var TIME = 400;//翻译持续时间
        var ITEM_TIME = 20;
        var imgCount = 2;//定义有几组图片

        $next.click(function () {
            //平滑翻到下一页
            nextPage(true);

        })

        $prev.click(function () {
            //平滑翻到上一页
            nextPage(false);

        })

        /**
         * true 上一页
         * false 下一页
         * @param next
         */
        function nextPage(next) {
            /*
                总的时间：TIME=400
                单元移动的间隔时间 ITEM_TIME = 20;
                总偏移量：offset
                单元移动的偏移量 itemOffset = offset/(TIME/ITEM_TIME)
                启动循环定时器不断更新$list的left，到达目标处停止定时器
             */

            var offset = 0;
            //计算offset
            offset = next ? -PAGE_WIDTH : PAGE_WIDTH  //？判断 true取前面，false取后面值
            //计算单元移动偏移量
            var itemOffset = offset/(TIME/ITEM_TIME);
            //取当前left或者top的值
            var currentLeft = $list.position().left;
            //计算出目标处的left值
            var targetLeft = currentLeft + offset;
            //启动循环定时器不断更新$list的left，到达目标处停止定时器
            var intervalId = setInterval(function () {//setInterval 时间间隔器
                //计算最新的currentLeft
                currentLeft +=itemOffset
                if (currentLeft == targetLeft){//到达目标位置
                    //清除定时器
                    clearInterval(intervalId);
                    //如果到达了最右边的图片，跳转到最左边的第二张
                    if(currentLeft===-(imgCount+1) * PAGE_WIDTH){
                        currentLeft = -PAGE_WIDTH;
                    }
                    //如果到达了最左边的图片，跳转到最右边的第二张
                    else if(currentLeft===0){
                        currentLeft = -imgCount * PAGE_WIDTH;
                    }
                }
                //设置left
                $list.css('left', currentLeft);//偏移
            },ITEM_TIME)
        }
    })
</script>

</body>
</html>
